<!-- eslint-disable vue/no-multiple-template-root -->
<!-- 二级路由页面 -->
<template>
    <div>
        <!-- 头部导航 -->
        <div>
            <van-nav-bar fixed>
                <template v-slot:left>
                    <img class="logo" src="@/assets/toutiao_logo.png" alt="" />
                </template>
                <template #right>
                    <van-icon  name="search" @click="moveSearchPageFn"
                    size="0.48rem" color="#fff" />
                </template>
            </van-nav-bar>
        </div>
        <!-- Tap栏导航 -->
        <div  class="main">
            <!-- v-model是激活下的坐标 -->
            <!--  <van-tabs v-model="active" sticky offset-top="1.226667rem"> -->
            <van-tabs v-model="channelId"  animated class="main-tabs" sticky offset-top="1.226667rem">
                <van-tab :title="obj.name" :name="obj.id"
                v-for="obj in userChannelList" :key="obj.id">
                <ArticleList :channelId="channelId"></ArticleList>
                </van-tab>
            </van-tabs>

            <!-- 编辑频道图标 -->
            <van-icon @click="plusClickFn" name="plus" size="0.37333334rem" class="moreChannels"/>
        </div>

        <!-- 屏幕管理的弹出层 -->

        <van-popup class="channel_popup" v-model="show" get-container="body">
        <ChannelEdit :userList="userChannelList"
        :unCheckList="unCheckChannelList"
        @addChannelEV="addChannelFn"
        @removeChannelEV="removeChannelFn"
        @closeEV="closeFn"
        ref="editRef"
        v-model="channelId"></ChannelEdit>
        </van-popup>
    </div>
</template>

<script>
import {
  getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI,
  removeTheChannelAPI
} from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'Home',
  data () {
    return {
      channelId: 0, // 激活时的频道id,默认频道ID为0
      userChannelList: [], // 用户选择的频道列表,
      allChannelList: [], // 所有频道列表
      // articleList: [] // 文章列表
      show: false // 屏幕弹出层的显示与隐藏
    }
  },
  components: {
    ArticleList, ChannelEdit
  },
  async created () {
    // 频道列表篇
    const res = await getUserChannelsAPI()
    this.userChannelList = res.data.data.channels

    // this.channelChangeFn()
    // 所有频道列表
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
  },
  methods: {
    // async  channelChangeFn () {
    //   // 文章列表
    //   // const res2 = await getAllArticleListAPI({
    //   //   channel_id: this.channelId, // 先默认请求频道推荐
    //   //   timestamp: (new Date()).getTime()
    //   // })
    //   // console.log(res2)
    //   // this.articleList = res2.data.data.results
    // }
    plusClickFn () {
      this.show = true
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      // 还需把最新的数组，发送给后台
      // 数组甲对象字段 -》转换
      // 推荐频道不能传递-删除不是推荐频道剩下的频道对象

      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj } // 拷贝（浅拷贝）
        delete newObj.name
        newObj.seq = index
        return newObj // 让map方法把新对象收集起来形成一个新数组
      })

      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)
      const res = await removeTheChannelAPI({
        channelId: channelObj.id
      })
      console.log(res)
      // 知道删除几口返回状态码204（Not Content）无返回内容
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
      // 我要让内部编辑状态回归false
      this.$refs.editRef.isEdit = false
    },
    moveSearchPageFn () {
      this.$router.push('/search')
    }
  },
  computed: {
    unCheckChannelList () {
      // 注释的写法有毛病，以简写为准
      // const newArr = this.allChannelList.filter(bigObj => {
      //   const index = this.userChannelList.findIndex(smallObj => {
      //     return smallObj.id === bigObj
      //   })
      //   // 如果找到了
      //   if (index > -1) { return false } else { return true }
      // })
      // return newArr
      return this.allChannelList.filter(bigObj => (this.userChannelList.findIndex(smallObj => smallObj.id === bigObj.id) === -1))
    }
  }
}
</script>

<style lang="less">
.logo {
    width: 100px;
    height: 30px;
}
.main{
  padding-top: 44px;
}
 /* 设置 tabs 容器的样式 */
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

 /* 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup{
  // vw和vh是CSS3新出的单位，参考浏览器窗口的把百分比
  width: 100vw;
  height:100vh
}
</style>
